<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
</head>

<link rel="stylesheet" href="/css/login.css">
<link rel="stylesheet" href="/css/base.css">

<body>
        <div class="main" id="login-box">

                <div class="loginbox">
                        <h2 class="mb-4 mt-0 text-center">用户登录</h2>
                        <div class="form-group">
                                <input type="text" class="form-control reverse" placeholder="请输入用户名">
                        </div>
                        <div class="form-group">
                                <input type="password" class="form-control reverse" placeholder="请输入密码">
                        </div>
                        <div class="form-group">
                                <div class="pb_select-wrap">
                                        <select class="form-control reverse">
                                                <option value="01" selected>教师</option>
                                                <option value="02">学生</option>
                                                <option value="03">家长</option>
                                                <option value="04">管理员</option>
                                        </select>
                                </div>
                        </div>
                        <div class="form-group">
                                <button class="btn" id="login-btn">登录</button>
                        </div>
                </div>

        </div>
        <!-- 模态窗口 -->
        <script src="/js/app.js"></script>
        <script>
                var login = (function () {
                        var bindEvents = function () {
                                login.el("#login-btn").off('click').on('click', function () {
                                        App.alert('未开放登录！', '', 2);
                                });
                        };
                        return {
                                data: {},
                                el: function (expr) {
                                        return $(expr ? expr : 'body');
                                },
                                init: function () {
                                        bindEvents();
                                        return;
                                },
                                show: function () {
                                        login.el().show();
                                        return this;
                                },
                                hide: function () {
                                        login.el().hide();
                                        return this;
                                },
                        }
                })();
                $(function () {
                        login.init();
                })
        </script>
</body>

</html>